import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    List<String> bannerDatas = List();


    bannerDatas
    ..add("http://sucai.suoluomei.cn/sucai/images/20190301/4113bce54e815c8302449e695baa52a3.jpg")
    ..add('http://sucai.suoluomei.cn/sucai/images/20190703/97e278abeb2049b5cd6ce51876ba0e38.jpg')
    ..add('http://sucai.suoluomei.cn/sucai_zs/images/20190713/f94ba2ad406941f42ea082ced1877e21.jpg')
    ..add('http://cdn.suoluomei.com/public/hplwx/images/banner-equity-1.jpg?v=6');

    Widget titleSection = new Container(
      padding: const EdgeInsets.symmetric(vertical:20.0,horizontal:30.0),
      child: new Row(
        children: [
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                new Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: new Text(
                    '深圳市禾葡兰化妆品有限公司',
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Text(
                  '广东省深圳市龙岗区大运软件小镇2栋3楼',
                  style: new TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),
          ),
          new FavoriteWidget(),
        ],
      ),
    );

    Column buildButtonColumn(IconData icon, String label) {
      Color color = Colors.green;

      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Icon(icon, color: color),
          new Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: new Text(
              label,
              style: new TextStyle(
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: color,
              ),
            ),
          ),
        ],
      );
    }

    Widget buttonSection = new Container(
      padding: new EdgeInsets.symmetric(vertical:10.0),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          buildButtonColumn(Icons.call, '咨询'),
          buildButtonColumn(Icons.near_me, '导航'),
          buildButtonColumn(Icons.share, '分享'),
        ],
      ),
    );

    Widget textSection = new Container(
      padding: const EdgeInsets.symmetric(vertical:10.0, horizontal:30.0),
      child: new Text(
        '''
深圳市禾葡兰化妆品有限公司（HerbPlantist）是一家集产品研发、生产、销售与个性化服务于一体的知名护肤企业。禾葡兰整合全球行业资源，建立领先的供应链和服务链，与国际知名研发机构强强联合、开展最为前沿的皮肤护理领域的尖端生物科技研究，打造业界最具竞争力的护肤专业团队，为用户提供安全、有效、亲肤的产品与护肤解决方案，为女性创造美丽价值、成就靓丽人生。

禾葡兰作为移动社交零售电商模式领导者，以移动互联网技术为纽带，去除中间流通环节，直接链接禾粉、服务禾粉，提供个性化定制的护肤解决方案，最大化地满足禾粉需求。

品牌释义：禾之柔嫩、葡之通透、兰之莹白，由[禾]、[葡]、[兰]直观地组成了[禾葡兰]品牌，清晰地传递了禾葡兰追求绿色草本、天然萃取、天人合一的品牌价值与内涵。
        ''',
        softWrap: true,
      ),
    );

    var ratings = new Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          new Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              new Icon(Icons.star, color: Colors.black),
              new Icon(Icons.star, color: Colors.black),
              new Icon(Icons.star, color: Colors.black),
              new Icon(Icons.star, color: Colors.black),
              new Icon(Icons.star, color: Colors.black),
            ],
          ),
          new Text(
            '170 Reviews',
            style: new TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w800,
              fontFamily: 'Roboto',
              letterSpacing: 0.5,
              fontSize: 20.0,
            ),
          ),
        ],
      ),
    );

    var leftColumn = new Container(
      padding: const EdgeInsets.symmetric(vertical:0, horizontal:30.0),
      child: new Column(
        children: [
          ratings,
          buttonSection,
        ],
      ),
    );

    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('首页',style: new TextStyle(fontSize: 20.0, color:Color(0xFFFFFFFF))),
          backgroundColor: Color(0xFF000000),
          elevation: 2.0,
          centerTitle:true,
          // leading: Icon(Icons.arrow_back),
        ),
        body: new ListView(
          children: [
            new Container(
              padding: const EdgeInsets.symmetric(vertical:10.0),
              width: 420.0,
              //1.8是banner宽高比，0.8是viewportFraction的值
              height: 420 / 1.8 * 0.8,
              child: Swiper(
                itemCount: bannerDatas.length,
                //item数量
                itemBuilder: (BuildContext context, int index) {
                  //item构建
                  return Container(                     // 用Container实现图片圆角的效果
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: new NetworkImage(
                          bannerDatas[index],
                        ),  // 图片数组
                        fit: BoxFit.cover,
                      ),
                      borderRadius: BorderRadius.all(
                        Radius.circular(15.0),
                      ),
                    ),

                  );
                },
                autoplay: true,
                //是否自动播放
                autoplayDelay: 3000,
                //自动播放延迟
                autoplayDisableOnInteraction: true,
                //触发时是否停止播放

                duration: 600,
                //动画时间

                // control: new SwiperControl(),
                //默认分页按钮

                //默认指示器
                pagination: new SwiperPagination(
                  // SwiperPagination.fraction 数字1/5，默认点
                  builder: new DotSwiperPaginationBuilder(size: 6, activeSize: 8),
                ),

                viewportFraction: 0.8,
                //视图宽度，即显示的item的宽度屏占比
                scale: 0.8,
                //两侧item的缩放比

                onTap: (int index) {
                  //点击事件，返回下标
                  print("index-----" + index.toString());
                },
              ),
            ),
            // new Image.asset(
            //   'images/lake.jpg',
            //   height: 240.0,
            //   fit: BoxFit.cover,
            // ),
            titleSection,
            leftColumn,
            // buttonSection,
            textSection,
            // ...
          ],
        ),
        // floatingActionButton: FloatingActionButton(
        //   tooltip: 'AI测试',
        //   child: Icon(Icons.add_a_photo),
        // ),
      ),
    );
  }
}

class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => new _FavoriteWidgetState();
}

class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true;
  int _favoriteCount = 41;

  void _toggleFavorite() {
    setState(() {
      // If the lake is currently favorited, unfavorite it.
      if (_isFavorited) {
        _favoriteCount -= 1;
        _isFavorited = false;
        // Otherwise, favorite it.
      } else {
        _favoriteCount += 1;
        _isFavorited = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        new Container(
          padding: new EdgeInsets.all(0.0),
          child: new IconButton(
            icon: (_isFavorited
                ? new Icon(Icons.star)
                : new Icon(Icons.star_border)),
            color: Colors.red[500],
            onPressed: _toggleFavorite,
          ),
        ),
        new SizedBox(
          width: 18.0,
          child: new Container(
            child: new Text('$_favoriteCount'),
          ),
        ),
      ],
    );
  }
}
